<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			<!-- 伪类选择器：    语法：任意选择器：hover 每个伪类选择器，具备特点 
			                     所有元素具备 hover   【常见伪类选择器】
			-->
			h1:hover{
				background: #ff5500;
				color: #55ff00;
			}
			/* 
			 伪类选择器：   link      链接未点击时状态
			               active    链接被点击时状态
						   visited   链接点击后状态
						   hover     选定连接时状态
			主要结合在一起，针对a元素效果
			*/
		   a:link{ /* 未访问状态*/
			   color: #ff5500;
			   /* 去掉超链接下划线 */
			   text-decoration: none;
		   }
		   a:active{ /* 被点击时状态 */
			   color: #00ffff;
			   background: #ff0000;
		   }
		   a:visited{ /* 点击后状态 */
			   color: #55ff7f;
			   background: #aaff00;
		   }
		   a:hover{
			   font-size: 36px;
			
		   }
		   /**
			* 伪类选择器：input：focus 获取焦点 鼠标点击输入框效果
			* 
			针对 输入框 input元素
			*/
		   input:focus{
			   background: #ffff00;
		   }
		   /* 伪类选择器：   ：first-child 第一个儿子元素
			                ：last-child 最后一个儿子元素
							：nth-child（n） 匹配n个儿子元素
			针对：父子级，默认父子级 table、列表
			*/
		   li:first-child{
			   background: #00ff00;
			   color: #00ffff;
		   }
		   li:last-child{
			   font-size: 15pt;
		   }
		   li:nth-child(2){
			   background: #ffaa00;
			   font-size: 15px;
		   }
		   li:nth-child(3){
		   	   background: #ffaa00;
		   	   font-size: 15px;
		      }
		   
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>